// 来自 React 的内置组件，用于在加载异步组件时显示占位符（fallback）
import React from 'react';
// 引入路由的组件
import { BrowserRouter, useRoutes } from 'react-router-dom';
// 获取所有的页面路由
import routes from '~react-pages';
// 引入路由规则
import rules from '@/routers/rules';
// 引入UI框架
import 'antd-mobile/es/global';

const App = () => {
  // 定义路由组件
  const Routers = () => {
    // 获取当前路径
    const { pathname } = useLocation();
    // 路由跳转
    const navigate = useNavigate();
    // 供全局引用
    React.navigate = navigate;
    useEffect(() => { // 必须要使用useEffect钩子，因为里面有作渲染
      // 检查是否登录
      const check = async () => {
        // 获取cookies,登录信息
        const business = React.Cookies.load('business') ? React.Cookies.load('business') : {};
        // 如果cookies为空
        if (Object.getOwnPropertyNames(business).length === 0) {
          React.fail('请先登录', () => {
            // 跳转到登录页
            navigate('/business/login');
          });
          return;
        }
        // 获取用户id和账号
        const id = business.id ?? 0;
        const mobile = business.mobile ?? '';
        // 发起请求 check
        const result = await React.Http.post('/business/check', { id, mobile });
        // 处理请求结果
        if (result.code === 1) {
          // 保存用户信息
          React.Cookies.save('business', result.data, { path: '/' });
          React.business = result.data;
        } else {
          React.fail(result.msg, () => {
            // 清空用户信息
            React.Cookies.remove('business', { path: '/' });
            React.business = {};
            navigate('/business/login');
          });
        }
      }
      // 如果不在不用检查登录的数组里，则需要调用check函数检查登录
      if (!rules.includes(pathname)) check();
    }, [pathname, navigate]); // 监听pathname的变化

    return (
      <React.Suspense>
        {useRoutes(routes)}
      </React.Suspense>
    )
  }
  // App组件
  return (
    <BrowserRouter>
      <Routers />
    </BrowserRouter>
  )
}

export default App;